.pe-tag {
    --pe-tag-size-default: 24px;
    --pe-tag-size-small: 20px;
    --pe-tag-size-large: 32px;
    --pe-tag-size: var(--pe-tag-size-default);
    --pe-tag-padding: var(--pe-padding-default);
    --pe-tag-bg-color: var(--pe-color-primary);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-primary);
    --pe-tag-border-radius: var(--pe-border-radius);
}

.pe-tag {
    height: var(--pe-tag-size);
    padding: var(--pe-tag-padding);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: var(--pe-tag-border-radius);
    background-color: var(--pe-tag-bg-color);
    color: var(--pe-tag-text-color);
    border: 1px solid var(--pe-tag-border-color);
    font-size: 12px;

    .pe-tag-text {
        line-height: 12px;
    }
}

.pe-tag+.pe-tag {
    margin-left: var(--pe-margin-left);
}

.pe-tag-small {
    --pe-tag-size: var(--pe-tag-size-small);
    --pe-tag-padding: var(--pe-padding-small)
}

.pe-tag-large {
    --pe-tag-size: var(--pe-tag-size-large);
    --pe-tag-padding: var(--pe-padding-large);
}

.pe-tag-dark.pe-tag-primary {
    --pe-tag-bg-color: var(--pe-color-primary);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-primary);
}

.pe-tag-dark.pe-tag-success {
    --pe-tag-bg-color: var(--pe-color-success);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-success);
}

.pe-tag-dark.pe-tag-info {
    --pe-tag-bg-color: var(--pe-color-info);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-info);
}

.pe-tag-dark.pe-tag-warning {
    --pe-tag-bg-color: var(--pe-color-warning);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-warning);
}

.pe-tag-dark.pe-tag-error {
    --pe-tag-bg-color: var(--pe-color-error);
    --pe-tag-text-color: var(--pe-color-white);
    --pe-tag-border-color: var(--pe-color-error);
}

.pe-tag-light.pe-tag-primary {
    --pe-tag-bg-color: var(--pe-color-primary1);
    --pe-tag-text-color: var(--pe-color-primary);
    --pe-tag-border-color: var(--pe-color-primary1);
}

.pe-tag-light.pe-tag-success {
    --pe-tag-bg-color: var(--pe-color-success1);
    --pe-tag-text-color: var(--pe-color-success);
    --pe-tag-border-color: var(--pe-color-success1);
}

.pe-tag-light.pe-tag-info {
    --pe-tag-bg-color: var(--pe-color-info1);
    --pe-tag-text-color: var(--pe-color-info);
    --pe-tag-border-color: var(--pe-color-info1);
}

.pe-tag-light.pe-tag-warning {
    --pe-tag-bg-color: var(--pe-color-warning1);
    --pe-tag-text-color: var(--pe-color-warning);
    --pe-tag-border-color: var(--pe-color-warning1);
}

.pe-tag-light.pe-tag-error {
    --pe-tag-bg-color: var(--pe-color-error1);
    --pe-tag-text-color: var(--pe-color-error);
    --pe-tag-border-color: var(--pe-color-error1);
}

.pe-tag-plain.pe-tag-primary {
    --pe-tag-bg-color: var(--pe-color-white);
    --pe-tag-text-color: var(--pe-color-primary);
    --pe-tag-border-color: var(--pe-color-primary);
}

.pe-tag-plain.pe-tag-success {
    --pe-tag-bg-color: var(--pe-color-white);
    --pe-tag-text-color: var(--pe-color-success);
    --pe-tag-border-color: var(--pe-color-success);
}

.pe-tag-plain.pe-tag-info {
    --pe-tag-bg-color: var(--pe-color-white);
    --pe-tag-text-color: var(--pe-color-info);
    --pe-tag-border-color: var(--pe-color-info);
}

.pe-tag-plain.pe-tag-warning {
    --pe-tag-bg-color: var(--pe-color-white);
    --pe-tag-text-color: var(--pe-color-warning);
    --pe-tag-border-color: var(--pe-color-warning);
}

.pe-tag-plain.pe-tag-error {
    --pe-tag-bg-color: var(--pe-color-white);
    --pe-tag-text-color: var(--pe-color-error);
    --pe-tag-border-color: var(--pe-color-error);
}

.pe-tag-light.pe-tag-primary.pe-tag-hit {
    --pe-tag-border-color: var(--pe-color-primary);
}

.pe-tag-light.pe-tag-success.pe-tag-hit {
    --pe-tag-border-color: var(--pe-color-success);
}

.pe-tag-light.pe-tag-info.pe-tag-hit {
    --pe-tag-border-color: var(--pe-color-info);
}

.pe-tag-light.pe-tag-warning.pe-tag-hit {
    --pe-tag-border-color: var(--pe-color-warning);
}

.pe-tag-light.pe-tag-error.pe-tag-hit {
    --pe-tag-border-color: var(--pe-color-error);
}

.pe-tag-round {
    --pe-tag-border-radius: calc(var(--pe-tag-size) / 2)
}